import React,{ useState,useEffect } from 'react'
import MyTabBar from '../../components/MyTabBar'
import { Image,Tag,Tabs } from 'antd-mobile'
import Board from '../../components/Board'
import  headerImg from '../../image/com-header.png'
import { getNoteList } from '../../api/note'
import './index.css'

export default function Community() {
  const [noteList, setNoteList] = useState([])
  useEffect(()=>{
    //获取帖子列表数据
    async function fetchData(){
      const {data, status} = await getNoteList()
      if(status === 0){
        setNoteList(data)
      }
    }
    fetchData();
  },[])
   const hotList = noteList.filter((item,index)=>{
      return item.id < 5
   })
  return (
    <div className='cmt-container'>
      <div className="cmt-header">
         <div className='header-img'>
          <Image src={headerImg} width='80px' height='80px'></Image>
         </div>

          <div className='header-content'>
              <h2>全民寻宠互助社区</h2>
              <span style={{display:'block'}}>全国寻宠信息汇总，人人参与公益，发布信息，提供线索，让每一只宠物都能有个温暖的家。</span>
          </div>
      </div>

      <div className="cmt-notice">
          <div><Tag color='danger' style={{borderRadius:'3px'}}>置顶</Tag> 军犬...获赞千万</div>
          <div><Tag color='danger' style={{borderRadius:'3px'}}>置顶</Tag> 寻宠</div>
      </div>

      <div className="cmt-main">
        <Tabs>
          <Tabs.Tab title='推荐' key='hot'>
              {
                hotList.map((item,index)=>{
                  // console.log(item)
                    return <Board
                      key = {item.id}
                      nickname = {item.nickname}
                      avatar = {item.avatar} 
                      content={item.content}
                      time = {item.time}
                      picture = {item.picture}
                      ></Board>
                })
              }
          </Tabs.Tab>
          <Tabs.Tab title='全部' key='all'>
          {
                noteList.map((item,index)=>{
                  // console.log(item)
                    return <Board
                      key = {item.id}
                      nickname = {item.nickname}
                      avatar = {item.avatar} 
                      content={item.content}
                      time = {item.time}
                      picture = {item.picture}
                      ></Board>
                })
              }
          </Tabs.Tab>
        </Tabs>
      </div>
      
      <MyTabBar/>
    </div>
    
  )
}
